<template>
  <div class="tag-container">
    <el-button
      @click="addHandler"
      size="small"
      type="primary"
      class="btn-sty"
    >新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column
        prop="userName"
        label="昵称"
        width="180"
      />
      <el-table-column
        prop="account"
        label="用户名"
        width="180"
      />
      <el-table-column
        prop="password"
        label="密码"
        width="180"
      />
      <el-table-column
        prop="authorityList"
        label="权限"
        width="180"
      >
        <template slot-scope="scope">{{ scope.row.authorityList | authorityFilter }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteTag(scope.row._id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增管理员"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <!-- <el-form-item label="头像" :label-width="formLabelWidth">
          <ossUpload
            :imageUrl="form.src ? domain + form.src : ''"
            :imgName="randomName"
            @upload-img="handlerUpload"
          />
        </el-form-item>-->
        <el-form-item
          label="账号名"
          :label-width="formLabelWidth"
          style="width:550px"
        >
          <el-input
            v-model.trim="form.account"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          style="width:550px"
        >
          <el-input
            v-model.trim="form.password"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="昵称"
          :label-width="formLabelWidth"
          style="width:550px"
        >
          <el-input
            v-model.trim="form.userName"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="权限列表"
          :label-width="formLabelWidth"
        >
          <el-checkbox-group v-model="authorityList">
            <el-checkbox label="0">动态</el-checkbox>
            <el-checkbox label="1">百科</el-checkbox>
            <el-checkbox label="2">应用设置</el-checkbox>
            <el-checkbox label="3">mod</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addConfig"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import ossUpload from "@/components/ossUpload.vue";
import md5 from "md5-js";
export default {
  data() {
    return {
      isEdit: false,
      authorityList: [],
      form: {
        userName: "",
        account: "",
        src: "",
        password: "",
      },
      dialogFormVisible: false,
      activeName: "",
      formLabelWidth: "120px",
      tableData: [],
    };
  },
  components: {
    // ossUpload
  },
  created() {
    this.getList();
  },
  computed: {
    randomName: {
      get: function () {
        let time = new Date();
        return md5(time);
      },
      cache: false,
    },
  },
  filters: {
    authorityFilter(arr) {
      let temp = arr.map((val) => {
        let arrMap = ["动态", "百科", "应用设置", "mod"];
        return arrMap[+val];
      });
      return temp.join("，");
    },
  },
  methods: {
    handlerUpload(src) {
      this.form.src = src;
    },
    addHandler() {
      this.form = {
        userName: "",
        account: "",
        password: "",
      };
      this.authorityList = [];
      this.isEdit = false;
      this.dialogFormVisible = true;
    },
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.isEdit = true;
      this.form = row;
      this.authorityList = row.authorityList;
    },
    async addConfig() {
      if (this.isEdit) {
        return this.UpdateTag(this.form._id);
      }
      let res = await this.axios.post("/configs/add", {
        ...this.form,
        authorityList: this.authorityList,
      });
      if (res.status == 200) {
        this.$message.success("添加成功");
        this.getList(this.activeName);
      }
      this.dialogFormVisible = false;
    },
    async UpdateTag(id) {
      let res = await this.axios.post("/configs/update", {
        id,
        ...this.form,
        authorityList: this.authorityList,
      });
      if (res.status == 200) {
        this.$message.success("修改成功");
        this.getList();
      }
      this.dialogFormVisible = false;
    },
    async deleteTag(id) {
      let res = await this.axios.post("/configs/delete", {
        id,
      });
      if (res.status == 200) {
        this.$message.success("删除成功");
        this.getList();
      }
    },
    async getList(type = "") {
      let res = await this.axios("/configs", {
        params: {
          type,
          version: "DST",
        },
      });
      this.tableData = res.data;
    },
  },
};
</script>
<style lang="scss" scoped>
.tag-container {
  position: relative;
  padding: 16px;
  .btn-sty {
    position: absolute;
    z-index: 10;
    top: 16px;
    right: 16px;
  }
}
</style>